<template>
  <div class="chapter-list">
    <el-card class="box-card">
      <div class="chapter-wrap" :style="{ borderColor: curLibrary.color }">
        <div class="chapter-title" :style="{ background: curLibrary.color }">
          <h2>{{ title }}导航</h2>
        </div>
        <div class="clearfix">
          <el-empty
            v-show="!chapterData.length"
            description="暂无数据"
          ></el-empty>
          <ul class="chapter-nav">
            <li v-for="v in chapterData" :key="v.id" @click="toCourseDetail(v)">
              <p
                :class="['sheng', { active: v.id == active }]"
                :style="{
                  color: v.id == active ? curLibrary.color : '#333',
                }"
              >
                {{ v.title }}
              </p>
            </li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { LIBRARY } from '@/utils/config.js'
import { openApiSysCourseQuery } from '@/api/openApi'
import homeConfig from '@/mixins/homeConfig'
import Bus from '@/utils/bus.js'
export default {
  mixins: [homeConfig],
  data() {
    return {
      title: '课程库',
      type: this.$route.meta.type,
      active: 0,
      courseId: '',
      chapterData: [],
      curLibrary: {},
      listQuery: {
        page: 1,
        limit: 99,
        courseType: this.$route.meta.type,
        auditStatus: 2,
      },
    }
  },
  mounted() {
    this.active = this.$route.query.id || this.$store.getters.courseId
    this.curLibrary = LIBRARY.filter((v) => v.type == this.type)[0]
    this.courseId = this.$route.query.courseId || this.$store.getters.courseId
    this.getList()
    if (this.type == 1) {
      this.title = this.showModuleName('kck') || '课程库'
    } else if (this.type == 2) {
      this.title = this.showModuleName('zyk') || '专业库'
    } else if (this.type == 3) {
      this.title = this.showModuleName('bzk') || '兵种库'
    } else if (this.type == 4) {
      this.title = this.showModuleName('ztk') || '专题库'
    }
  },
  methods: {
    getList() {
      // if (!this.courseId) return;
      let { queryMode, type } = this.$route.query
      this.listQuery.auditStatus = queryMode == 2 && type == 3 ? '' : 2
      openApiSysCourseQuery(this.listQuery).then((res) => {
        this.chapterData = res.data.data
        // console.log(this.chapterData)
      })
    },
    toCourseDetail(row) {
      this.active = row.id
      this.$store.commit('SETCURCOURSE', row)
      if (this.type == 3) {
        if (this.$route.name == 'arms-list-home') {
          //兵种库列表页
          Bus.$emit('refreshListHomeChapter', { courseId: row.id })
        } else if (this.$route.name == 'arms-knowdedge-home') {
          //兵种库详情页
          this.$router.push({
            name: 'arms-list-home',
          })
        }
        return
      }
      let name = 'specialty-detail'
      if (this.type == 2) {
        name = 'specialty-detail'
      }
      if (this.type == 4) {
        name = 'topic-detail'
      }
      this.$router.push({
        name: name,
        query: { courseId: row.id },
      })
    },
  },
}
</script>
<style scoped lang="scss" >
.chapter-list {
  width: 100%;
  .chapter-nav {
    li {
      height: 48px;
      line-height: 48px;
      border-bottom: 1px solid #ebeef5;
      p {
        text-indent: 10px;
        font-size: 16px;
        color: #333;
        font-weight: bold;
        max-width: 100%;
        cursor: pointer;
        border-left: 5px solid transparent;
      }
      .active {
        color: var(--colorH1);
        border-left: 5px solid;
        background: #f5f7fa;
      }
    }
  }
  .chapter-wrap {
    text-align: center;
    min-height: 500px;
    // border-left: 5px solid #0659a7;
    // border-bottom: 5px solid #0659a7;
  }
  .chapter-title {
    height: 90px;
    color: #fff;
    line-height: 90px;
    text-align: center;
    background: #0659a7;
    h2 {
      font-size: 26px;
    }
  }
  .chapter-name {
    text-indent: 10px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
  }
  .chapter-subsection {
    padding: 10px 0;
    background: #f4f4f4;
    p {
      text-indent: 20px;
      color: #333;
      line-height: 32px;
      font-size: 14px;
      cursor: pointer;
      &:hover {
        color: var(--colorH1);
      }
    }
  }
}
</style>
<style scoped>
.chapter-list >>> .el-card__body {
  padding: 0;
}
.chapter-list >>> .el-collapse-item__content {
  padding-bottom: 0;
}
.chapter-list >>> .el-collapse-item__arrow {
  display: none;
}
</style>